<template>
  <el-card>
    <div class="top-search">
      <!-- <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="采矿权" name="first"> -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <!-- <el-form-item label="公告类型">
              <el-radio-group v-model="formInline.radio2">
                <el-radio-button label="挂牌公告" />
                <el-radio-button label="拍卖公告" />
                <el-radio-button label="补充公告" />
              </el-radio-group>
            </el-form-item> -->
        <el-form-item label="资源类型">
          <el-input v-model="formInline.user" placeholder="请输入资源类型" />
        </el-form-item>
        <el-form-item label="交易方式">
          <el-input v-model="formInline.user" placeholder="请输入交易方式" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form-item>
      </el-form>
      <!-- </el-tab-pane>
            <el-tab-pane label="探矿权" name="second">Config</el-tab-pane>
          </el-tabs> -->
    </div>
  </el-card>
  <el-card>
    <div class="btn-list">
      <!-- <el-button type="primary" @click="cliAdd">新增</el-button> -->
    </div>

    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" fixed align="center" />
      <el-table-column
        type="index"
        width="55"
        fixed
        label="序号"
        align="center"
      />
      <el-table-column
        prop="date"
        label="资源类型"
        width="150"
        align="center"
        fixed
      />
      <el-table-column
        prop="name"
        label="交易方式"
        width="150"
        align="center"
        fixed
      />
      <el-table-column
        prop="address"
        label="矿产品名称"
        width="150"
        align="center"
      />
      <el-table-column
        prop="address"
        label="竞买号"
        width="150"
        align="center"
      />
      <el-table-column
        prop="address"
        label="行政区"
        width="150"
        align="center"
      />
      <el-table-column
        prop="address"
        label="金额(万元)"
        width="150"
        align="center"
      />
      <el-table-column
        prop="address"
        label="资格确认时间"
        width="150"
        align="center"
      />

      <el-table-column label="操作" align="center" width="150">
        <template #default="scope">
          <div class="btn">
            <el-button type="primary" @click="cliSelect">查看</el-button>
            <!-- <el-button type="success" @click="cliSelect">同意</el-button>
                    <el-button type="danger">驳回</el-button> -->
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination
        v-model:current-page="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[100, 200, 300, 400]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
  <!-- 新增 -->
  <el-dialog
    v-model="dialogVisible"
    title="通知信息内容"
    width="50%"
    :before-close="handleClose"
  >
    <div>
      <el-form :model="form" label-width="120px">
        <el-form-item label="消息主题">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker type="datetime" placeholder="Select date and time" />
        </el-form-item>
        <el-form-item label="接收人">
          <el-input></el-input>
        </el-form-item>

        <el-form-item label="消息内容">
          <el-input :rows="5" type="textarea" placeholder="Please input" />
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">
          保 存
        </el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from "vue";
import { ElMessageBox } from "element-plus";
import { useRoute, useRouter, RouteLocationMatched } from "vue-router";
import type { TabsPaneContext } from "element-plus";
import {
  Iphone,
  Location,
  OfficeBuilding,
  Tickets,
  User,
} from "@element-plus/icons-vue";

const router = useRouter();
const activeName = ref("second");
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
// 数据
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
const multipleSelection = ref([]);
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val;
};

const cliAdd = () => {
  dialogVisible.value = true;
};

// 新增模态框
const dialogVisible = ref(false);

const handleClose = (done: () => void) => {
  ElMessageBox.confirm("Are you sure to close this dialog?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};

const form = reactive({
  name: "",
  value: "",
  time: "",
  radio: "挂牌公告",
});
const options = [
  {
    value: "采矿权",
    label: "采矿权",
  },
  {
    value: "探矿权",
    label: "探矿权",
  },
];

// 分页
const currentPage4 = ref(4);
const pageSize4 = ref(100);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
const formInline = reactive({
  radio1: "采矿权",
  radio2: "挂牌公告",
  user: "",
  region: "",
});

const onSubmit = () => {
  console.log("submit!");
};

const cliSelect = () => {
  dialogVisible.value = true;
  // router.push("/announcement/managementDetail");
};
</script>

<style lang="scss" scoped>
.el-card {
  margin: 15px;
}
.top-search {
  display: flex;
}
.btn-list {
  display: flex;
  margin: 10px 0;
}
.pagination {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  .el-button {
    margin-right: 5px;
  }
  // justify-content: space-around;
}
.demo-tabs {
  width: 100%;
}
</style>
